<template>
  <view class="related-content">
    <view class="top-block view-block">
      <uni-section title="实时信息" type="line" titleColor=" #102C59" titleFontSize="32rpx">
        <template #right>
          <uni-data-select v-model="wsValue" :localdata="options" @change="changeSelect" :clear="false"></uni-data-select>
        </template>
      </uni-section>

      <view class="c-bg">
        <view class="left">
          <image class="icon" src="/static/images/monitor/zw-w.png" mode=""></image>
          <text class="txt">闸瓦磨损报警（总）</text>
        </view>
        <image class="icon-dot-l" :src="require(`@/static/images/monitor/${leftObj.wearAlarm ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
      </view>
      <view class="c-bg">
        <view class="left">
          <image class="icon" src="/static/images/monitor/zw-w.png" mode=""></image>
          <text class="txt">弹簧疲劳报警（总）</text>
        </view>
        <image class="icon-dot-l" :src="require(`@/static/images/monitor/${rightObj.fatigueAlarm ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
      </view>

      <view class="zb">
        <view class="zb-bg">
          <view class="top">
            <view class="title">
              <image class="icon" src="/static/images/monitor/zw-p.png" mode=""></image>
              <view class="">左闸盘</view>
            </view>
            <view class="wd">{{ leftObj.temp || 0 }}℃</view>
          </view>
          <view class="zb-col">
            超温：
            <image class="icon-dot-l" :src="require(`@/static/images/monitor/${+leftObj.temps == 0 ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
          </view>
          <view class="zb-col">
            偏摆过大：
            <image class="icon-dot-l" :src="require(`@/static/images/monitor/${+leftObj.absoluteValues == 0 ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
          </view>
          <view class="zb-col">偏摆绝对值：{{ leftObj.absoluteValue }}</view>
        </view>

        <view class="zb-bg">
          <view class="top">
            <view class="title">
              <image class="icon" src="/static/images/monitor/zw-p.png" mode=""></image>
              <view class="">右闸盘</view>
            </view>
            <view class="wd">{{ rightObj.temp || 0 }}℃</view>
          </view>
          <view class="zb-col">
            超温：
            <image class="icon-dot-l" :src="require(`@/static/images/monitor/${+rightObj.temps == 0 ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
          </view>
          <view class="zb-col">
            偏摆过大：
            <image class="icon-dot-l" :src="require(`@/static/images/monitor/${+rightObj.absoluteValues == 0 ? 'dot-l' : 'dot-l-red'}.png`)" mode=""></image>
          </view>
          <view class="zb-col">偏摆绝对值：{{ rightObj.absoluteValue }}</view>
        </view>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="闸瓦间隙" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <view class="list-bg">
        <view class="item" v-for="(item, inx) in dataList" :key="inx + wsValue">
          <image class="icon" src="/static/images/monitor/zw-j.png" mode=""></image>
          <text class="name">{{ item.index }}号闸</text>
          <text class="val">间隙：{{ item.num || 0 }}mm</text>
          <text class="lab">磨损</text>
          <image class="icon-dot-s mr-20" :src="require(`@/static/images/monitor/${+item.wearTear == 0 ? 'dot-s' : 'dot-s-red'}.png`)" mode=""></image>
          <text class="lab">间隙过大</text>
          <image class="icon-dot-s" :src="require(`@/static/images/monitor/${+item.gapStatus == 0 ? 'dot-s' : 'dot-s-red'}.png`)" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDeviceRunInfo } from '@/api/monitorCenter/index.js';

export default {
  data() {
    return {
      options: [
        {
          value: 1,
          text: '闸瓦监测1'
        },
        {
          value: 2,
          text: '闸瓦监测2'
        },
        {
          value: 3,
          text: '闸瓦监测3'
        }
      ],
      wsValue: 1,
      leftObj: {},
      rightObj: {},
      dataList: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      this.leftObj = Object.assign({}, {});
      this.rightObj = Object.assign({}, {});
      this.dataList.splice(0, this.dataList.length, []);

      let param = this.wsValue;
      if (this.wsValue == 1) {
        param = 'x_zwjc';
        const { data, code } = await getDeviceRunInfo(param);
        if (code !== 200) return;
        this.dataHooks_1(data);
      }
      if (this.wsValue == 2) {
        param = 'dn_zwjc';
        const { data, code } = await getDeviceRunInfo(param);
        if (code !== 200) return;
        this.dataHooks_2(data);
      }
      if (this.wsValue == 3) {
        param = 'db_zwjc';
        const { data, code } = await getDeviceRunInfo(param);
        if (code !== 200) return;
        this.dataHooks_3(data);
      }
    },
    dataHooks_1(e) {
      this.leftObj.wearAlarm = true; //(e['t_160055']===0 || e['t_160055']==='0')?true : false //0值为绿，其他值红
      this.leftObj.temp = e['t_160081'] || 0;
      this.leftObj.temps = e['t_160049'] || 0;
      this.leftObj.absoluteValue = e['t_160083'] || 0;
      this.leftObj.absoluteValues = e['t_160051'] || 0;

      this.leftObj = Object.assign({}, this.leftObj);

      this.rightObj.fatigueAlarm = true; //(e['t_160056']===0 || e['t_160056']==='0')?true : false
      this.rightObj.temp = e['t_160082'] || 0;
      this.rightObj.temps = e['t_160050'] || 0;
      this.rightObj.absoluteValue = e['t_160084'] || 0;
      this.rightObj.absoluteValues = e['t_160052'] || 0;

      this.rightObj = Object.assign({}, this.rightObj);

      //闸瓦间隙 index是闸机编号
      let dataList = [
        { index: 1, gapStatus: 't_160025', wearTear: 't_160001', num: 't_160057' },
        { index: 2, gapStatus: 't_160026', wearTear: 't_160002', num: 't_160058' },
        { index: 3, gapStatus: 't_160027', wearTear: 't_160003', num: 't_160059' },
        { index: 4, gapStatus: 't_160028', wearTear: 't_160004', num: 't_160060' },
        { index: 5, gapStatus: 't_160029', wearTear: 't_160005', num: 't_160061' },
        { index: 6, gapStatus: 't_160030', wearTear: 't_160006', num: 't_160062' },
        { index: 7, gapStatus: 't_160031', wearTear: 't_160007', num: 't_160063' },
        { index: 8, gapStatus: 't_160032', wearTear: 't_160008', num: 't_160064' },
        { index: 9, gapStatus: 't_160033', wearTear: 't_160009', num: 't_160065' },
        { index: 10, gapStatus: 't_160034', wearTear: 't_160010', num: 't_160066' },
        { index: 11, gapStatus: 't_160035', wearTear: 't_160011', num: 't_160067' },
        { index: 12, gapStatus: 't_160036', wearTear: 't_160012', num: 't_160068' },
        { index: 13, gapStatus: 't_160037', wearTear: 't_160013', num: 't_160069' },
        { index: 14, gapStatus: 't_160038', wearTear: 't_160014', num: 't_160070' },
        { index: 15, gapStatus: 't_160039', wearTear: 't_160015', num: 't_160071' },
        { index: 16, gapStatus: 't_160040', wearTear: 't_160016', num: 't_160072' },
        { index: 17, gapStatus: 't_160041', wearTear: 't_160017', num: 't_160073' },
        { index: 18, gapStatus: 't_160042', wearTear: 't_160018', num: 't_160074' },
        { index: 19, gapStatus: 't_160043', wearTear: 't_160019', num: 't_160075' },
        { index: 20, gapStatus: 't_160044', wearTear: 't_160020', num: 't_160076' },
        { index: 21, gapStatus: 't_160045', wearTear: 't_160021', num: 't_160077' },
        { index: 22, gapStatus: 't_160046', wearTear: 't_160022', num: 't_160078' },
        { index: 23, gapStatus: 't_160047', wearTear: 't_160023', num: 't_160079' },
        { index: 24, gapStatus: 't_160048', wearTear: 't_160024', num: 't_160080' },
        { index: 25, gapStatus: 't_160095', wearTear: 't_160087', num: 't_160103' },
        { index: 26, gapStatus: 't_160096', wearTear: 't_160088', num: 't_160104' },
        { index: 27, gapStatus: 't_160097', wearTear: 't_160089', num: 't_160105' },
        { index: 28, gapStatus: 't_160098', wearTear: 't_160090', num: 't_160106' },
        { index: 29, gapStatus: 't_160099', wearTear: 't_160091', num: 't_160107' },
        { index: 30, gapStatus: 't_160100', wearTear: 't_160092', num: 't_160108' },
        { index: 31, gapStatus: 't_160101', wearTear: 't_160093', num: 't_160109' },
        { index: 32, gapStatus: 't_160102', wearTear: 't_160094', num: 't_160110' }
      ];
      let tempList = dataList.map((item) => {
        return {
          index: item.index,
          gapStatus: e[item.gapStatus] || 0,
          wearTear: e[item.wearTear] || 0,
          num: e[item.num] || 0
        };
      });
      this.dataList.splice(0, this.dataList.length, ...tempList);
    },

    dataHooks_2(e) {
      this.leftObj.wearAlarm = true; //(e['t_160055']===0 || e['t_160055']==='0')?true : false //0值为绿，其他值红
      this.leftObj.temp = e['t_100085'] || 0;
      this.leftObj.temps = e['t_100049'] || 0;
      this.leftObj.absoluteValue = e['t_100081'] || 0;
      this.leftObj.absoluteValues = e['t_100051'] || 0;

      this.leftObj = Object.assign({}, this.leftObj);

      this.rightObj.fatigueAlarm = true; //(e['t_160056']===0 || e['t_160056']==='0')?true : false
      this.rightObj.temp = e['t_100086'] || 0;
      this.rightObj.temps = e['t_100050'] || 0;
      this.rightObj.absoluteValue = e['t_100082'] || 0;
      this.rightObj.absoluteValues = e['t_100052'] || 0;

      this.rightObj = Object.assign({}, this.rightObj);

      //闸瓦间隙 index是闸机编号
      let dataList = [
        { index: 1, gapStatus: 't_100025', wearTear: 't_100001', num: 't_100057' },
        { index: 2, gapStatus: 't_100026', wearTear: 't_100002', num: 't_100058' },
        { index: 3, gapStatus: 't_100027', wearTear: 't_100003', num: 't_100059' },
        { index: 4, gapStatus: 't_100028', wearTear: 't_100004', num: 't_100060' },
        { index: 5, gapStatus: 't_100029', wearTear: 't_100005', num: 't_100061' },
        { index: 6, gapStatus: 't_100030', wearTear: 't_100006', num: 't_100062' },
        { index: 7, gapStatus: 't_100031', wearTear: 't_100007', num: 't_100063' },
        { index: 8, gapStatus: 't_100032', wearTear: 't_100008', num: 't_100064' },
        { index: 9, gapStatus: 't_100033', wearTear: 't_100009', num: 't_100065' },
        { index: 10, gapStatus: 't_100034', wearTear: 't_100010', num: 't_100066' },
        { index: 11, gapStatus: 't_100035', wearTear: 't_100011', num: 't_100067' },
        { index: 12, gapStatus: 't_100036', wearTear: 't_100012', num: 't_100068' },
        { index: 13, gapStatus: 't_100037', wearTear: 't_100013', num: 't_100069' },
        { index: 14, gapStatus: 't_100038', wearTear: 't_100014', num: 't_100070' },
        { index: 15, gapStatus: 't_100039', wearTear: 't_100015', num: 't_100071' },
        { index: 16, gapStatus: 't_100040', wearTear: 't_100016', num: 't_100072' },
        { index: 17, gapStatus: 't_100041', wearTear: 't_100017', num: 't_100073' },
        { index: 18, gapStatus: 't_100042', wearTear: 't_100018', num: 't_100074' },
        { index: 19, gapStatus: 't_100043', wearTear: 't_100019', num: 't_100075' },
        { index: 20, gapStatus: 't_100044', wearTear: 't_100020', num: 't_100076' },
        { index: 21, gapStatus: 't_100045', wearTear: 't_100021', num: 't_100077' },
        { index: 22, gapStatus: 't_100046', wearTear: 't_100022', num: 't_100078' },
        { index: 23, gapStatus: 't_100047', wearTear: 't_100023', num: 't_100079' },
        { index: 24, gapStatus: 't_100048', wearTear: 't_100024', num: 't_100080' }
      ];
      let tempList = dataList.map((item) => {
        return {
          index: item.index,
          gapStatus: e[item.gapStatus] || 0,
          wearTear: e[item.wearTear] || 0,
          num: e[item.num] || 0
        };
      });
      this.dataList.splice(0, this.dataList.length, ...tempList);
    },

    dataHooks_3(e) {
      this.leftObj.wearAlarm = true; //(e['t_160055']===0 || e['t_160055']==='0')?true : false //0值为绿，其他值红
      this.leftObj.temp = e['t_110085'] || 0;
      this.leftObj.temps = e['t_110049'] || 0;
      this.leftObj.absoluteValue = e['t_110081'] || 0;
      this.leftObj.absoluteValues = e['t_110051'] || 0;

      this.leftObj = Object.assign({}, this.leftObj);

      this.rightObj.fatigueAlarm = true; //(e['t_160056']===0 || e['t_160056']==='0')?true : false
      this.rightObj.temp = e['t_110086'] || 0;
      this.rightObj.temps = e['t_110050'] || 0;
      this.rightObj.absoluteValue = e['t_110082'] || 0;
      this.rightObj.absoluteValues = e['t_110052'] || 0;

      this.rightObj = Object.assign({}, this.rightObj);

      //闸瓦间隙 index是闸机编号
      let dataList = [
        { index: 1, gapStatus: 't_110025', wearTear: 't_110001', num: 't_110057' },
        { index: 2, gapStatus: 't_110026', wearTear: 't_110002', num: 't_110058' },
        { index: 3, gapStatus: 't_110027', wearTear: 't_110003', num: 't_110059' },
        { index: 4, gapStatus: 't_110028', wearTear: 't_110004', num: 't_110060' },
        { index: 5, gapStatus: 't_110029', wearTear: 't_110005', num: 't_110061' },
        { index: 6, gapStatus: 't_110030', wearTear: 't_110006', num: 't_110062' },
        { index: 7, gapStatus: 't_110031', wearTear: 't_110007', num: 't_110063' },
        { index: 8, gapStatus: 't_110032', wearTear: 't_110008', num: 't_110064' },
        { index: 9, gapStatus: 't_110033', wearTear: 't_110009', num: 't_110065' },
        { index: 10, gapStatus: 't_110034', wearTear: 't_110010', num: 't_110066' },
        { index: 11, gapStatus: 't_110035', wearTear: 't_110011', num: 't_110067' },
        { index: 12, gapStatus: 't_110036', wearTear: 't_110012', num: 't_110068' },
        { index: 13, gapStatus: 't_110037', wearTear: 't_110013', num: 't_110069' },
        { index: 14, gapStatus: 't_110038', wearTear: 't_110014', num: 't_110070' },
        { index: 15, gapStatus: 't_110039', wearTear: 't_110015', num: 't_110071' },
        { index: 16, gapStatus: 't_110040', wearTear: 't_110016', num: 't_110072' },
        { index: 17, gapStatus: 't_110041', wearTear: 't_110017', num: 't_110073' },
        { index: 18, gapStatus: 't_110042', wearTear: 't_110018', num: 't_110074' },
        { index: 19, gapStatus: 't_110043', wearTear: 't_110019', num: 't_110075' },
        { index: 20, gapStatus: 't_110044', wearTear: 't_110020', num: 't_110076' },
        { index: 21, gapStatus: 't_110045', wearTear: 't_110021', num: 't_110077' },
        { index: 22, gapStatus: 't_110046', wearTear: 't_110022', num: 't_110078' },
        { index: 23, gapStatus: 't_110047', wearTear: 't_110023', num: 't_110079' },
        { index: 24, gapStatus: 't_110048', wearTear: 't_110024', num: 't_110080' }
      ];
      let tempList = dataList.map((item) => {
        return {
          index: item.index,
          gapStatus: e[item.gapStatus] || 0,
          wearTear: e[item.wearTear] || 0,
          num: e[item.num] || 0
        };
      });
      this.dataList.splice(0, this.dataList.length, ...tempList);
    },

    changeSelect(val) {
      this.wsValue = val;
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
.related-content {
  overflow-y: auto;
  
  .top-block {
    // box-shadow: 0rpx -15rpx 21rpx -5rpx rgba(0, 0, 0, 0.25);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 40rpx;
  }
  .icon-dot-l {
    width: 33rpx;
    height: 33rpx;
  }

  .c-bg {
    width: 100%;
    height: 70rpx;
    background: rgba(46, 125, 255, 0.1);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22rpx;
    margin-bottom: 20rpx;

    .left {
      display: flex;
      align-items: center;
    }
    .icon {
      width: 41rpx;
      height: 41rpx;
    }

    .txt {
      font-weight: 500;
      font-size: 32rpx;
      color: #000000;
      padding-left: 15rpx;
      line-height: 32rpx;
    }
  }

  .zb {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 12rpx;
    .zb-bg {
      width: calc(50% - 10rpx);
      height: 186rpx;
      background: rgba(46, 125, 255, 0.1);
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      padding: 8rpx 14rpx 8rpx 8rpx;

      .top {
        display: flex;
        justify-content: space-between;
        font-weight: 500;
        font-size: 26rpx;
        color: #000000;
        padding-bottom: 16rpx;

        .title {
          display: flex;
        }
        .icon {
          width: 28rpx;
          height: 28rpx;
        }
        .wd {
          width: 81rpx;
          height: 33rpx;
          background: url('/static/images/monitor/zw-t.png') no-repeat;
          background-size: 100% 100%;

          font-weight: 500;
          font-size: 24rpx;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .zb-col {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
      }
    }
  }

  .list-bg {
    .item {
      width: 100%;
      height: 62rpx;
      background: rgba(46, 125, 255, 0.1);
      border-radius: 10rpx 10rpx 10rpx 10rpx;

      font-weight: 500;
      font-size: 26rpx;
      color: #000000;

      display: flex;
      align-items: center;

      margin-top: 30rpx;
      padding-left: 12rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;
      }

      .icon-dot-s {
        width: 22rpx;
        height: 22rpx;
      }

      .name {
        padding-left: 8rpx;
        width: 130rpx;
      }
      .val {
        width: 240rpx;
      }
      .lab {
        padding-right: 10rpx;
      }

      .mr-20 {
        margin-right: 22rpx;
      }
    }
  }
}
::v-deep .uni-select {
  width: 180rpx;
  height: 42rpx;
  border-color: rgba(0, 0, 0, 0.3);

  .uni-select__input-text {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.5);
  }

  .uni-select__input-box {
    height: 42rpx;
    line-height: 42rpx;
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 0 0 20rpx 0;
}
::v-deep .uni-select__selector-item {
  color: rgba(0, 0, 0, 0.5);
}
</style>
